<div class="page-content page-blog">
    <?php
    if (count($products)==0){
        ?>
        <div style="width: 100%; text-align: center; margin-top: 15%;">
            <img src="/public/home/img/cart-dark.png">
            <h2></br>You have no item in cart, <a href="/">Continue shopping</a></h2>
        </div>

    <?php
    }
    ?>
<ul class="blog-row">
<!-- // -->
    <?php
    $count = 0;
    foreach ($products as $product) {
        ?>
        <li class="blog-row-item">
            <div class="blog-row-item-t">
                <div class="blog-row-item-tt">
                    <a href="/item/<?php echo $product->id?>" class="blog-row-image"><img src="<?php echo $images[$count]->url?>" alt="" style="height: 230px; "/></a>

                    <div class="blog-row-content">
                        <div class="blog-row-content-a"><a href="/item/<?php echo $product->id?>"><?php echo $product->name ?></a></div>
                        <div class="post-likes">
                            <span >$<?php echo $product->price ?></span>
                        </div>
                        <a class="btn-small" data-select="selected" onclick="select(this)" data-id="<?php echo $product->id?>" data-price="<?php echo $product->price ?>">SELECTED</a>
                        <a class="blog-row-content-d" onclick="removeProduct(<?php echo $product->id?>,this)">REMOVE FROM CART</a>
                    </div>
                </div>
            </div>
        </li>
    <?php
        $count++;
    }

    ?>
    </ul>


</div>
<div>
    <style type="text/css">
        .navi{
            position: fixed; opacity: 0.9; bottom: 0px; width: 100%; height: 65px; z-index: 99; padding-top: 20px; padding-left: 20px;;
            background: #ffffff;
        }
        .navi:hover{
            opacity: 1;
        }
    </style>
    <div class="navi">
        <a class="btn-small" onclick="selectAll()">Select All</a>
        <a class="btn-small" onclick="unselectAll()">Unselect All</a>
        <span style="float: right; right: 0px; position: fixed; margin-right: 20px;">
            <a class="btn-small" style="background: green; color: #ffffff; border-bottom: hidden" onclick="checkout()">$<span id="total"></span> TOTAL</a>
            <a class="btn-small" onclick="checkout()">Checkout Selected</a>
        </span>
    </div>
</div>

<form id="checkout" method="post" action="/checkout" hidden="hidden">
    <input name="pids" id="pids">
</form>
<script>
    var unselectAll = function(){
        $('[data-select="selected"]').removeClass('btn-small');
        $('[data-select="selected"]').addClass('blog-row-content-d');
        $('[data-select="selected"]').text('Select')
        $('[data-select="selected"]').attr('data-select','unselect');
    };
    var selectAll = function(){
        $('[data-select="unselect"]').removeClass('blog-row-content-d');
        $('[data-select="unselect"]').addClass('btn-small');
        $('[data-select="unselect"]').text('Selected')
        $('[data-select="unselect"]').attr('data-select','selected');
    };
    var select = function(e){
        if ($(e).attr('data-select')=='selected'){
            $(e).removeClass('btn-small');
            $(e).addClass('blog-row-content-d');
            $(e).text('Select')
            $(e).attr('data-select','unselect');
        }
        else {
            $(e).removeClass('blog-row-content-d');
            $(e).addClass('btn-small');
            $(e).text('Selected')
            $(e).attr('data-select','selected');
        }
        var price = 0;
        $('[data-select="selected"]').each(function(i,_e){
            price += parseFloat($(_e).attr('data-price'));
        })
        $('#total').text(price);
    };
    var removeProduct = function(pid,e){
        $.post('/purchase/remove_item',{pid:pid})
            .done(function(data){
                if (data==1){
                    $(e).text('REMOVED');
                    setTimeout(function(){
                        location.reload();
                    },1000);
                }
            })
    };

    var checkout = function(){
        var pids = [];
        $('[data-select="selected"]').each(function(i,e){
            pids.push($(e).attr('data-id'));
        });
        $('#pids').val(pids.join(','));
        if (pids.length>0) $('#checkout').submit();
        else alert('Please select at least 1 item');

    };


    var price = 0;
    $('[data-select="selected"]').each(function(i,_e){
        price += parseFloat($(_e).attr('data-price'));
    })
    $('#total').text(price);


</script>